{% extends "templates/main_template.html.j2" %}
{% import "macros/table.html.j2" as TABLE %}



{% block title %}Пользователи · Farado{% endblock %}

{% set active_menu = 'users' %}


{#----------------------------------------------------------------------------#}
{% block styles %}
  {{ TABLE.STYLES() }}
  <link href="/static/css/page-toolbar.css" rel="stylesheet" type="text/css" />
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block breadcrumb %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Пользователи</li>
  </ol>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block content %}

  <div class="page-toolbar">
    <a href="/users/add_user" class="btn btn-outline-primary btn-sm" role="button" aria-pressed="true"><i
      class="bi bi-plus mr-1"></i>Добавить пользователя</a>
  </div>

  <div class="row placeholders mt-4">

    <table 
        class="table table-striped table-sm table-bordered table-hover"
        style="width:100%"
        id="users_table">
      <thead>
        <tr>
          <th scope="col" style="width: 1%">Id</th>
          <th scope="col">Login</th>
          <th scope="col">Имя</th>
          <th scope="col">Отчество</th>
          <th scope="col">Фамилия</th>
          <th scope="col">Email</th>
          <th scope="col">Нужно сменить пароль</th>
          <th scope="col">Блокировка</th>
          <th scope="col">Статус</th>
        </tr>
      </thead>
      <tbody>
        {% for user in project_manager.users() %}
        <tr>
          <th scope="row">{{ user.id }}</th>
          <td>
            <a href="/users/user?target_user_id={{ user.id }}" title="Modify user">{{ user.login|e }}</a>
          </td>
          <td>{{ user.first_name|e }}</td>
          <td>{{ user.middle_name|e }}</td>
          <td>{{ user.last_name|e }}</td>
          <td>{{ user.email|e }}</td>
          <td>
            {% if user.need_change_password %}
              <i class="bi bi-check-square-fill"></i>
            {% endif %}
          <td>
            {% if user.is_blocked %}
              Blocked
            {% endif %}
          </td>
          <td>
            {% if user.online_state %}
              <span class="badge rounded-pill bg-success">Online</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

  </div>
{% endblock %}


{#----------------------------------------------------------------------------#}
{% block scripts %}
  {{ TABLE.SCRIPTS() }}
  <script>
    document_ready_function = function() {
      $('#users_table').DataTable({,
        "paging": false,
        "fixedColumns": false,,
        "processing": true,
        "serverSide": false,
        "searching": true,
        "ordering": true,
        "pageLength": 20,
        "lengthChange": false,
        "order": [[ 1, "asc" ]],
        "columns": [
          {
            data: 'id',
            orderable: true
          },
          {
            data: 'login',
            orderable: true
          },
          {
            data: 'first_name',
            orderable: true
          },
          {
            data: 'middle_name',
            orderable: true
          },
          {
            data: 'last_name',
            orderable: true
          },
          {
            data: 'email',
            orderable: true
          },
          {
            data: 'need_change_password',
            orderable: true
          },
          {
            data: 'is_blocked',
            orderable: true
          },
          {
            data: 'online_state',
            orderable: true
          }
        ]
      });
    }
  </script>
{% endblock %}
